<template>
	<el-layout>
		<el-navbar v-model:top="navTop" :placeholder="true" :fixed="true" :autoBack="true" :border="true" title="我的收藏"></el-navbar>
		
		<el-refresh ref="refreshRef" @refresh="refresh" @scrolltolower="scrolltolower" :scrollHeight="getScrollHeight">
			
			<view class="wrapper">
				
				<view class="goods-list">
					<view class="goods-item" v-for="(item,index) in list" :key="index">
						<view class="thumb_image"><image :src="item.photo"></image></view>
						<view class="info">
							<view class="title">{{ item.title }}</view>
							<view class="bottom">
								<view>￥{{ item.price }}</view>
								<view @click="onDelete(item.id,index)">删除</view>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</el-refresh>
		
	</el-layout>
</template>

<script setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { nextTick,ref,computed } from "vue";
	import { inArray } from "@/el-ui/libs/check";
	
	const refreshRef  = ref();
	const navTop 	  = ref(0);
	
	onLoad(()=>{
		nextTick(()=>{
			init();
		})
	});
	
	const list = ref([]);
	const init = async ()=>{
		refreshRef.value?.resetPage();
	}
	
	const getScrollHeight = computed(()=>{
		const { windowHeight } = uni.getSystemInfoSync();
		return (windowHeight - navTop.value);
	})
	
	/**
	 * 下拉刷新
	 */
	const refresh = ()=>{
		init();
	}
	
	/**
	 * 上拉加载
	 */
	const scrolltolower = (data)=>{
		if(refreshRef.value.isMore()) {
			refreshRef.value.loadingPage();
	
			setTimeout(() => {
				uni.$http.get("ucenter.collect/index",{ page: data.page }).then(res=>{
					if(res.code == 1){
						if(data.page == 1) list.value = [];
						refreshRef.value.setData(res.data.total,res.data.list.length);
						list.value = list.value.concat(res.data.list);
					}else if(res.code == -1){
						if(data.page == 1 && res.data.list.length <= 0) list.value = [];
						refreshRef.value.emptyPage();  
					}
				});
			}, 100)
		}
	}
	
	const onDelete = (value,index)=>{
		uni.$layer.showModal("您确定要删除该内容吗？").then(()=>{
			uni.$http.post("ucenter.collect/delete",{ id: value }).then(res=>{
				if(res.code){
					list.value.splice(index, 1);
					if(list.value.length <= 0) init();
					uni.$layer.showToast("删除成功");
				}else{
					uni.$layer.showToast(res.msg);
				}
			});
		});
	}
	
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 20rpx;
		.goods-list {
			width: 100%;
			.goods-item {
				margin-top: 30rpx;
				background-color: #fff;
				border-radius: 10rpx;
				display: flex;
				padding: 20rpx;
				&:first-child { 
					margin-top: 10rpx;
				}
				.thumb_image {
					image {
						width: 200rpx;
						height: 200rpx;
					}
				}
				.info {
					padding-left: 20rpx;
					width: 100%;
					.title {
						height: 80rpx; 
						font-size: 30rpx;
						display: -webkit-box;
						overflow: hidden; 
						word-break:break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 40rpx;
						view {
							font-size: 28rpx;
							&:nth-child(1){
								color: red;
							}
							&:nth-child(2){
								color: #666;
								border: 1px solid #ccc;
								padding: 6rpx 15rpx;
								border-radius: 10rpx;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
	}
</style>